<style lang="scss">
.queryform {
	.ivu-form-item {
		margin-bottom: 6px;
		min-height: 32px;
	}
	.ivu-form-item-content {
		font-weight: 800;
	}
}
</style>

<template>
	<Form class="queryform clearfix" v-bind="getFormProps">
        <Row>
            <template v-for="(item,index) in formdata"  :key="index">
                <Col span='12' v-if="handleVisible(item)" :key="index" v-bind="getColProps(item)">
                    <FormItem v-bind="getFormItemProps(item)">
                        <Tooltip v-if="item.popper" v-bind="getPopperProps(item)">
                            <compRender v-for="data in getRenderProps(item)" :key="data._key" v-bind="data" />
                        </Tooltip>
                        <compRender v-else v-for="data in getRenderProps(item)" :key="data._key" v-bind="data" />
                    </FormItem>
                </Col>
            </template>
        </Row>
	</Form>
</template>

<script>
import { h,resolveComponent } from 'vue'
import formmixin from "./formmixin";
export default {
	mixins: [formmixin],
	computed: {
		getFormProps() {
			return { labelWidth: 120, ...this.$attrs };
		}
	},
	methods: {
		getFormItemProps(item) {
			const { label, langKey, formItem } = item;
			return {
				label: langKey ? this.$ct(langKey, { defaultValue: label }) : label,
				...formItem
			};
		},
		getPopperProps(item) {
			return {
				content: item.popper,
				gpu: true
				// popperStyle: 'max-width:unset;padding:0;'
			}
		},
		getRenderProps(item) {
			let { key, render, options, children, style, class: className, props, complex, tag, custom } = item;
			if (render) {
				return [{
					tag: 'div',
					style,
					_key: 0,
					class: className,
					children: render
				}]
			}
			const value = this.value[key];
            if (custom && this.isGroupFormChild(tag)) {
                let readonly = { readonly: true };
                // iview-plus的Radio没有readonly选项
                if (tag == "Radio") {
                    readonly = { disabled: true };
                }
                const hasOptions = Array.isArray(options);
                className = className || 'margin-right-15';
                let result = [{
					tag,
					style,
					class: className,
					modelValue: value, 
                    ...props, 
                    ...readonly,
					children,
					_key: 0,
				}]
                if (hasOptions) {
                    children = (h) => {
                        return options.map((item, index) => {
                            return h(resolveComponent(tag), {
                                ...item,
                                label: item.value,
                                ...readonly
                            }, item.label);
                        });
                    }
                    let parentTag = tag + "Group";
                    result = [{
                        tag: parentTag,
                        style,
                        class: className,
					    modelValue: value, 
                        ...props, 
                        ...readonly,
                        children,
                        _key: 0,
                    }];
                }
                return result;
            }
			// if (custom && this.isGroupFormChild(tag)) {
			// 	className = className || 'margin-right-15';
			// 	return options instanceof Array ? options.map((item, index) => {
			// 		return {
			// 			tag,
			// 			style,
			// 			class: className,
			// 			_key: index,
			// 			attrs: { value: item.key ? this.value[item.key] : value, ...props, ...item, readonly: true },
			// 			children
			// 		}
			// 	}) : [{
			// 		tag,
			// 		style,
			// 		class: className,
			// 		_key: 0,
			// 		attrs: { value, ...props, readonly: true },
			// 		children
			// 	}]
			// }
			if (custom && tag) {
				return [{
					tag,
					style,
					class: className,
					attrs: { value, ...props, readonly: true },
					children,
					_key: 0,
				}]
			}
			return [{
				tag: 'div',
				class:'text-wrap',
				domProps: {
					innerHTML: this.getValueText(item, value)
				}
			}]
		},
	}
};



</script>